@{
    var theme = ViewContext.HttpContext.Request.Cookies[".theme"];
    var themeClass = theme == "dark" ? "navbar-dark bg-dark" : "navbar-light bg-light";

    var uinfo = IdentityService.Get(ViewContext.HttpContext);
    int num = uinfo == null ? 0 : CommonService.NewMessageQuery(uinfo.UserId);

    var rdv = ViewContext.RouteData.Values;
    var ctrl = rdv["controller"].ToString().ToLower();
    var actionName = rdv["action"].ToString().ToLower();
    var ca = ctrl + "/" + actionName;
    var caSearch = "home/index,home/type,run/user,run/discover,gist/user,gist/discover,draw/user,draw/discover,doc/user,doc/discover,guff/user,guff/discover".Split(',');
    var search = ViewContext.HttpContext.Request.Query["k"];

    AppContext.TryGetSwitch("Netnr.BuildHtml", out bool isBuildHtml);
}

@if (isBuildHtml)
{
    <nav class="nr-navbar navbar navbar-expand-lg @themeClass">
        <div class="container-fluid">
            <a class="navbar-brand text-decoration-none" href="https://www.netnr.com">
                <img src="/favicon.ico" style="height:1.3em;vertical-align:sub" />
                <span class="d-none d-sm-inline-block">Netnr</span>
            </a>
            <a class='small d-block d-lg-none' href="/@actionName" title='@ViewData["Title"]'>
                <b style="color:var(--sl-color-warning-600)">@ViewData["Title"]</b>
            </a>

            <button class="nr-navbar-toggler navbar-toggler" aria-label="navbar toggler">
                <sl-animation easing="ease-in-out" duration="1500" play>
                    <span class="navbar-toggler-icon"></span>
                </sl-animation>
            </button>

            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item mx-2">
                        <a class='nav-link active' href="/" title="ss.js.org">
                            <sl-animation class="nr-sla-ss" name="tada" easing="ease-in-out" duration="10000" play>
                                <div class="fw-bold">SS</div>
                            </sl-animation>
                        </a>
                    </li>
                    @if (ctrl == "ss" && actionName != "index")
                    {
                        <li class="nav-item mx-2">
                            <a class='nav-link' href="/@actionName" title='@ViewData["Title"]'>
                                <b style="color:var(--sl-color-warning-600)">@ViewData["Title"]</b>
                            </a>
                        </li>
                    }
                </ul>

                <ul class="navbar-nav">
                    <li class="nav-item">
                        <sl-icon-button class="mt-1" name="cloud-moon" data-action="theme"></sl-icon-button>
                    </li>
                </ul>
            </div>

            <!--mobile-->
            <sl-drawer label="Netnr" class="nr-navbar-drawer" style="--size: 14em;--body-spacing: 0;display: none">
                <sl-menu>
                    <sl-menu-item data-href="/">SS</sl-menu-item>

                    @if (ctrl == "ss" && actionName != "index")
                    {
                        <sl-menu-item data-href="/@actionName">@ViewData["Title"]</sl-menu-item>
                    }
                    <sl-divider></sl-divider>
                    <sl-menu-item data-action="theme"><sl-icon name="cloud-moon" slot="prefix"></sl-icon>Dark mode</sl-menu-item>
                </sl-menu>
            </sl-drawer>
        </div>
    </nav>
}
else
{
    <!--顶部导航-->
    <nav class="nr-navbar navbar navbar-expand-lg @themeClass">
        <div class="container-fluid">
            <a class="navbar-brand text-decoration-none" href="/">
                <img src="/favicon.ico" style="height:1.3em;vertical-align:sub" />
                <span class="d-none d-sm-inline-block">Netnr</span>
            </a>
            @if (ctrl == "ss" && actionName != "index")
            {
                <a class='small d-block d-lg-none' href="/ss/@actionName" title='@ViewData["Title"]'>
                    <b style="color:var(--sl-color-warning-600)">@ViewData["Title"]</b>
                </a>
            }

            <button class="nr-navbar-toggler navbar-toggler" aria-label="navbar toggler">
                <sl-animation easing="ease-in-out" duration="1500" play>
                    <span class="navbar-toggler-icon"></span>
                </sl-animation>
            </button>

            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item mx-2">
                        <a class='nav-link @(ctrl=="gist"?"active":"")' href="/gist/discover" title="代码片段">
                            @if (ctrl == "gist")
                            {
                                <sl-animation name="tada" easing="ease-in-out" duration="10000" play>
                                    <div class="fw-bold">Gist</div>
                                </sl-animation>
                            }
                            else
                            {
                                <div>Gist</div>
                            }
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class='nav-link @(ctrl=="run"?"active":"")' href="/run/discover" title="在线运行代码">
                            @if (ctrl == "run")
                            {
                                <sl-animation name="tada" easing="ease-in-out" duration="10000" play>
                                    <div class="fw-bold">Run</div>
                                </sl-animation>
                            }
                            else
                            {
                                <div>Run</div>
                            }
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class='nav-link @(ctrl=="doc"?"active":"")' href="/doc/discover" title="文档管理">
                            @if (ctrl == "doc")
                            {
                                <sl-animation name="tada" easing="ease-in-out" duration="10000" play>
                                    <div class="fw-bold">Doc</div>
                                </sl-animation>
                            }
                            else
                            {
                                <div>Doc</div>
                            }
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class='nav-link @(ctrl=="draw"?"active":"")' href="/draw/discover" title="绘图">
                            @if (ctrl == "draw")
                            {
                                <sl-animation name="tada" easing="ease-in-out" duration="10000" play>
                                    <div class="fw-bold">Draw</div>
                                </sl-animation>
                            }
                            else
                            {
                                <div>Draw</div>
                            }
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class='nav-link @(ctrl=="guff"?"active":"")' href="/guff/discover" title="尬服：分享有趣的任何">
                            @if (ctrl == "guff")
                            {
                                <sl-animation name="tada" easing="ease-in-out" duration="10000" play>
                                    <div class="fw-bold">Guff</div>
                                </sl-animation>
                            }
                            else
                            {
                                <div>Guff</div>
                            }
                        </a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class='nav-link @(ctrl=="ss"?"active":"")' href="/ss" title="ss.js.org">
                            @if (ctrl == "ss")
                            {
                                <sl-animation class="nr-sla-ss" name="tada" easing="ease-in-out" duration="10000" play>
                                    <div class="fw-bold">SS</div>
                                </sl-animation>
                            }
                            else
                            {
                                <div>SS</div>
                            }
                        </a>
                    </li>
                    @if (ctrl == "ss" && actionName != "index")
                    {
                        <li class="nav-item mx-2">
                            <a class='nav-link' href="/ss/@actionName" title='@ViewData["Title"]'>
                                <b style="color:var(--sl-color-warning-600)">@ViewData["Title"]</b>
                            </a>
                        </li>
                    }
                    <!--搜索-->
                    @if (caSearch.Contains(ca))
                    {
                        <li class="nav-item mx-2 pt-1">
                            <form method="get">
                                <sl-input placeholder="Search..." size="small" class="nr-txt-search" name="k" value='@search'></sl-input>
                            </form>
                        </li>
                    }
                    else if (ca == "ss/index")
                    {
                        <li class="nav-item mx-2 pt-1">
                            <sl-input placeholder="Search..." size="small" class="nr-txt-search"></sl-input>
                        </li>
                    }
                </ul>

                <ul class="navbar-nav">
                    <li class="nav-item">
                        <sl-icon-button class="mt-1" name="cloud-moon" data-action="theme"></sl-icon-button>
                    </li>
                    @if (uinfo == null)
                    {
                        <li class="nav-item">
                            <a class="nav-link" href="/account/login">Sign in</a>
                        </li>
                    }
                    else
                    {
                        <li class="nav-item mx-2">
                            <a class="nav-link text-decoration-none" href="/user/message">
                                @if (num > 0)
                                {
                                    <sl-badge variant="success" pill pulse>@num</sl-badge>
                                }
                                else
                                {
                                    <sl-icon class="mt-1" name="bell"></sl-icon>
                                }
                            </a>
                        </li>
                        <li class="nav-item">
                            <sl-dropdown class="nr-navbar-dropdown">
                                <sl-icon-button class="mt-1" slot="trigger" name="person"></sl-icon-button>
                                <sl-menu style="display: none;">
                                    <sl-menu-item data-href="/user/id/@uinfo.UserId">我的主页</sl-menu-item>
                                    <sl-menu-item data-href="/user/setting">个人设置</sl-menu-item>
                                    <sl-divider></sl-divider>
                                    <sl-menu-item data-href="/home/write">写文章</sl-menu-item>
                                    <sl-menu-item data-href="/user/write">我的文章</sl-menu-item>
                                    <sl-divider></sl-divider>
                                    <sl-menu-item data-href="/note">记事本</sl-menu-item>
                                    <sl-divider></sl-divider>
                                    @if (uinfo?.UserId == AppTo.GetValue<int>("Common:AdminId"))
                                    {
                                        <sl-menu-item data-href="/admin">后台管理</sl-menu-item>
                                        <sl-divider></sl-divider>
                                    }
                                    <sl-menu-item data-href="/account/logout">退出</sl-menu-item>
                                </sl-menu>
                            </sl-dropdown>
                        </li>
                    }
                </ul>
            </div>

            <!--mobile-->
            <sl-drawer label="Netnr" class="nr-navbar-drawer" style="--size: 14em;--body-spacing: 0;display: none">
                <sl-menu>
                    <sl-menu-item data-href="/gist/discover">Gist</sl-menu-item>
                    <sl-menu-item data-href="/run/discover">Run</sl-menu-item>
                    <sl-menu-item data-href="/doc/discover">Doc</sl-menu-item>
                    <sl-menu-item data-href="/draw/discover">Draw</sl-menu-item>
                    <sl-menu-item data-href="/guff/discover">Guff</sl-menu-item>
                    <sl-menu-item data-href="/ss">SS</sl-menu-item>
                    <sl-divider></sl-divider>
                    <sl-menu-item data-action="theme"><sl-icon name="cloud-moon" slot="prefix"></sl-icon>Dark mode</sl-menu-item>
                    <sl-divider></sl-divider>
                    @if (uinfo == null)
                    {
                        <sl-menu-item data-href="/account/login">Sign in</sl-menu-item>
                    }
                    else
                    {
                        <sl-menu-item data-href="/user/message">消息</sl-menu-item>
                        <sl-menu-item data-href="/user/id/@uinfo.UserId">我的主页</sl-menu-item>
                        <sl-menu-item data-href="/user/setting">个人设置</sl-menu-item>
                        <sl-divider></sl-divider>
                        <sl-menu-item data-href="/home/write">写文章</sl-menu-item>
                        <sl-menu-item data-href="/user/write">我的文章</sl-menu-item>
                        <sl-divider></sl-divider>
                        <sl-menu-item data-href="/note">记事本</sl-menu-item>
                        <sl-divider></sl-divider>
                        @if (uinfo.UserId == AppTo.GetValue<int>("Common:AdminId"))
                        {
                            <sl-menu-item data-href="/admin">后台管理</sl-menu-item>
                            <sl-divider></sl-divider>
                        }
                        <sl-menu-item data-href="/account/logout">退出</sl-menu-item>
                    }
                </sl-menu>
            </sl-drawer>
        </div>
    </nav>
}